<template>
  <!-- 返回首页按钮 -->
  <div class="back-home">
    <el-button type="primary" @click="$router.push('/')" plain>
      <el-icon><House /></el-icon>
      返回首页
    </el-button>
  </div>

  <div class="order-list-page">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="全部订单" name="all" />
      <el-tab-pane label="待确认" name="0" />
      <el-tab-pane label="已确认" name="1" />
      <el-tab-pane label="已取消" name="2" />
      <el-tab-pane label="已完成" name="3" />
    </el-tabs>

    <div class="order-list" v-loading="loading">
      <el-empty v-if="!orders.length" description="暂无订单" />
      <el-card
          v-for="order in orders"
          :key="order.id"
          class="order-item"
      >
        <div class="order-header">
          <span class="order-no"  >订单号：{{ order.orderNo }} </span>
          <el-tag :type="getOrderStatusType(order.status)">
            {{ getOrderStatusText(order.status) }}
          </el-tag>
        </div>
        <div class="restaurant-info">
          <h3>{{ order.restaurantName }}</h3>
          <p class="table">餐桌号：{{ order.tableNumber }}</p>
        </div>
        <div class="order-content">
          <div class="dishes">
            <div v-for="detail in order.orderDetails" :key="detail.id" class="dish-item">
              <span class="name">{{ detail.dishName }}</span>
              <span class="quantity">x{{ detail.quantity }}</span>
              <span class="price">¥{{ detail.price }}</span>
              <span class="subtotal">¥{{ (detail.price * detail.quantity).toFixed(2) }}</span>
            </div>
          </div>
          <div class="info">
            <p>预订时间：{{ formatDateTime(order.reservationTime) }}</p>
            <p>联系人：{{ order.contactName }}</p>
            <p>联系电话：{{ order.contactPhone }}</p>
            <p>用餐人数：{{ order.personCount }}人</p>
            <p v-if="order.remark">备注：{{ order.remark }}</p>
          </div>
          <div class="total">
            总计：<span class="price">¥{{ order.totalAmount }}</span>
          </div>
        </div>
        <div class="order-footer">
          <el-button
              v-if="order.status === 0 || order.status === 1"
              type="danger"
              plain
              @click="handleCancel(order.id)"
          >
            取消订单
          </el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getMyOrders, cancelOrder } from '@/api/order'
import dayjs from 'dayjs'
import {House} from "@element-plus/icons-vue";

const loading = ref(false)
const orders = ref([])
const activeTab = ref('all')

// 获取订单列表
const fetchOrders = async () => {
  try {
    loading.value = true
    const status = activeTab.value === 'all' ? null : parseInt(activeTab.value)
    const res = await getMyOrders(status)
    orders.value = res.data
  } catch (error) {
    console.error('获取订单列表失败:', error)
    ElMessage.error('获取订单列表失败')
  } finally {
    loading.value = false
  }
}

// 处理标签页切换
const handleTabClick = () => {
  fetchOrders()
}

// 处理取消订单
const handleCancel = async (id) => {
  try {
    await ElMessageBox.confirm('确定要取消该订单吗？')
    await cancelOrder(id)
    ElMessage.success('取消成功')
    fetchOrders()
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消订单失败:', error)
      ElMessage.error('取消订单失败')
    }
  }
}

// 格式化日期时间
const formatDateTime = (datetime) => {
  return dayjs(datetime).format('YYYY-MM-DD HH:mm')
}

// 获取订单状态类型
const getOrderStatusType = (status) => {
  const types = {
    0: 'warning',
    1: 'primary',
    2: 'danger',
    3: 'success'
  }
  return types[status] || 'info'
}

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const texts = {
    0: '待确认',
    1: '已确认',
    2: '已取消',
    3: '已完成'
  }
  return texts[status] || '未知状态'
}

onMounted(() => {
  fetchOrders()
})
</script>

<style scoped lang="scss">
.order-list-page {
  padding: 20px;
}

.order-list {
  margin-top: 20px;
}

.order-item {
  margin-bottom: 20px;

  .order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;

    .order-no {
      color: #666;
    }
  }

  .restaurant-info {
    margin-bottom: 15px;

    h3 {
      margin: 0 0 10px;
      font-size: 18px;
    }

    .table {
      color: #666;
    }
  }

  .order-content {
    .dishes {
      margin-bottom: 15px;
      padding: 15px;
      background: #f8f8f8;
      border-radius: 4px;

      .dish-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        &:last-child {
          margin-bottom: 0;
        }

        .name {
          flex: 1;
        }

        .quantity {
          margin: 0 20px;
          color: #666;
        }

        .price {
          width: 80px;
          text-align: right;
          color: #666;
        }

        .subtotal {
          width: 100px;
          text-align: right;
          color: #f56c6c;
        }
      }
    }

    .info {
      p {
        margin: 8px 0;
        color: #666;
      }
    }

    .total {
      margin-top: 15px;
      text-align: right;
      font-size: 16px;

      .price {
        color: #f56c6c;
        font-size: 20px;
        font-weight: bold;
      }
    }
  }

  .order-footer {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
